<template>
	<div class="body">
		<div class="title">
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;">
				<span style="width: 100%;padding-left: 0.8vw">
					{{time}}
				</span>
			</div>
			<div style="width: 50vw;color: #fff;text-align: center;padding-top: 1vh;">
				<h2>馆情数据统计</h2>
			</div>
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;;text-align: right">
				<span style="width: 100%;padding-right: 0.8vw">
					{{week}}
				</span>
			</div>
		</div>
		<div class="content">
			<div style="width: 32vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-bars" style="padding-right: 5px"></i>图书分类&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 55vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="bookTypeChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-info-circle" style="padding-right: 5px"></i>馆藏信息&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 32vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="locationChart" style="height: 100%;"></div>
				</div>
			</div>
			<div style="width: 37vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-refresh" style="padding-right: 5px"></i>今日流通统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 42vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div style="display: flex;height: 42vh">
						<div id="todayCirculateChart" style="height: 100%;width: 50%;"></div>
						<div id="bookStatusChart" style="height: 100%;width: 50%"></div>
					</div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-globe" style="padding-right: 5px"></i>图书馆借阅统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 45vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<el-carousel :interval="10000" indicator-position="none" height="45vh">
						<el-carousel-item>
							<div id="quarterBorrowChart" style="height: 100%"></div>
						</el-carousel-item>
						<el-carousel-item>
							<div id="monthBorrowChart" style="height: 100%;"></div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div style="width: 26vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-book" style="padding-right: 5px"></i>新书推荐&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 34vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<el-carousel :interval="8000" indicator-position="none" type="card" height="33vh" style="padding-top: 4px">
						<el-carousel-item v-for="item in images">
							<img v-bind:src="item" style="padding: 0px 2px" height="100%" width="100%">
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-sort-amount-desc" style="padding-right: 5px"></i>读者借阅排行&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 25vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="readerRankingChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-sort-amount-desc" style="padding-right: 5px"></i>图书借阅排行&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 25vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="bookRankingChart" style="height: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')
	require('echarts/lib/component/dataZoom')
	require('echarts/lib/component/toolbox')

	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	var myChart = null;
	var myChart1 = null;
	var myChart2 = null;
	var date = new Date();
	export default {
		components: {

		},
		data() {
			Array.prototype.sum = function() {
				var result = 0;
				for(var i = 0; i < this.length; i++) {
					result += this[i];
				}
				return result;
			};
			return {
				time: '',
				week: '',
				bookBorrowDatas: [],
				images: [],
				localtionIndex: 1,
				locationPageCount: 0,
				timer: null,
				locationTimeOut: null,
				todayCirculateTimeOut: null,
				readerBorrowTimeOut: null,
				bookBorrowTimeOut: null
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			showTime() {
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var dateArr = ["日", "一", '二', '三', '四', '五', '六'];
				var day = myDate.getDay();
				var hours = myDate.getHours();
				var minutes = this.formatTime(myDate.getMinutes());
				var seconds = this.formatTime(myDate.getSeconds());
				this.time = " " + year + "年" + month + "月" + date + "日";
				this.week = "星期" + dateArr[day] + "\n" + hours + ":" + minutes + ":" + seconds;
				this.timer = null;
				this.timer = setTimeout(this.showTime, 1000);
			},
			//格式化时间：分秒。
			formatTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			},
			//图书分类数据
			getBookTypeDatas() {
				HttpServer.httpGet.call(this, '/Api/Statistics/Book/CategoryDistribution?UserLoginName=' + GloabFun.getUid() + '&Token=' + GloabFun.getToken() + '&UserKeyId=' + GloabFun.getKeyId(), function(response) {}, function(response) {
					var seriesDatas = [],
					lengendDatas = [];
					for(var i = 0; i < response.data.info.length; i++) {
						lengendDatas.push(response.data.info[i].bookcategory);
						seriesDatas[i] = {};
						seriesDatas[i].value = response.data.info[i].count;
						seriesDatas[i].name = response.data.info[i].bookcategory;
					}

					myChart = echarts.init(document.getElementById("bookTypeChart"));
					myChart.setOption({
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							x: 'center',
							y: 'top',
							itemGap: 5,
							itemWidth: 13,
							itemHeight: 8,
							padding: [2, 18, 0, 2],
							data: lengendDatas,
							textStyle: {
								color: '#fff'
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						series: [{
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: seriesDatas,
							label: {
								normal: {
									formatter: '{c}',
									textStyle: {
										// color: '#fff',
										fontWeight: 'bolder',
										fontSize: '13'
									}
								}
							},
							labelLine: {
								normal: {
									lineStyle: {
										// color: '#fff'
									},
								}
							},
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					});
				})
			},
			//借阅统计数据
			getMultipleInfoDatas() {
				HttpServer.httpGet.call(this, '/Api/Statistics/Circulation/MultipleInfo', function(response) {}, function(response) {
					var quarterLengend = [];
					response.data.quarterinfo.forEach(function(item) {
						quarterLengend.push(item.name);
					})
					myChart = echarts.init(document.getElementById("quarterBorrowChart"));
					myChart.setOption({
						animation: false,
						title: {
							text: '季度统计',
							x: 'right',
							textStyle: {
								color: '#fff'
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#FF0000', '#00FFFF', '#996666', '#FAEBD7'],
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertiacal',
							x: 'left',
							y: 'top',
							data: quarterLengend,
							textStyle: {
								color: '#fff'
							}
						},
						calculable: true,
						series: [{
							type: 'pie',
							// radius : [30, 110],
							center: ['55%', '50%'],
							// roseType : 'area',
							label: {
								normal: {
									formatter: '{c}({d}%)',
									textStyle: {
										// color: '#fff',
										fontWeight: 'bolder',
										fontSize: '13'
									}
								}
							},
							data: response.data.quarterinfo
						}]
					});
					myChart1 = echarts.init(document.getElementById("monthBorrowChart"));
					myChart1.setOption({
						animation: false,
						title: {
							text: '月份统计',
							x: 'right',
							textStyle: {
								color: '#fff'
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b}: {c}"
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
							data: response.data.month
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#000099', '#006633', '#009999', '#660033',
										'#660099', '#990033', '#999900', '#CC6633',
										'#FF9900', '#993399', '#33CCFF', '#FF0066'
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontWeight: 'bolder',
											fontSize: 14
										}
									}
								}
							},
							data: response.data.monthInfo,
							type: 'bar'
						}, {
							data: response.data.monthInfo,
							type: 'line',
							smooth: true
						}]
					});
					var seriesDatas = [],
					xAxisDatas = [];
					response.data.bookinfo.forEach(function(item) {
						xAxisDatas.push(item.bookname);
						seriesDatas.push(item.bookcount);
					})
					myChart2 = echarts.init(document.getElementById("bookRankingChart"));
					myChart2.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b}: {c}"
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
							data: xAxisDatas
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#006633', '#993399', '#990033', '#660033',
										'#660099', '#009999', '#006633', '#CC6633',
										'#FF9900', '#FFFFFF'
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontWeight: 'bolder',
											fontSize: 14
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					});
				})
				this.bookBorrowTimeOut = null;
				this.bookBorrowTimeOut = setTimeout(this.getMultipleInfoDatas, 3600000);
			},
			//获取馆藏地绑定数据
			getLocationBandleDatas() {
				if(this.localtionIndex < this.locationPageCount) {
					this.localtionIndex++;
				} else {
					this.localtionIndex = 1;
				}
				HttpServer.httpGet.call(this, '/Api/LibraryLocation/GetBandedInfo?uid=' + GloabFun.getUid() + '&index=' + this.localtionIndex + '&pagesize=4', function(response) {}, function(response) {
					this.locationPageCount = response.data.pagecount;
					var xAxisDatas = [],
					readerDatas = [],
					bookDatas = [];
					response.data.info.forEach(function(item) {
						xAxisDatas.push(item.locationname);
						readerDatas.push(item.readercount);
						bookDatas.push(item.bookcount);
					})
					myChart = echarts.init(document.getElementById("locationChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#4cabce', '#e5323e'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							data: ['读者', '图书', ],
							textStyle: {
								color: '#fff'
							}
						},
						calculable: true,
						xAxis: [{
							interval: 0,
							type: 'category',
							axisTick: {
								show: false
							},
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}],
						series: [{
							name: '读者',
							type: 'bar',
							data: readerDatas,
							label: {
								normal: {
									show: true,
									position: 'top',
									textStyle: {
										fontWeight: 'bolder',
										fontSize: 14
									}
								}
							}
						},
						{
							name: '图书',
							type: 'bar',
							barGap: 0,
							data: bookDatas,
							label: {
								normal: {
									show: true,
									position: 'top',
									textStyle: {
										fontWeight: 'bolder',
										fontSize: 14
									}
								}
							}
						}
						]
					});
				})
				this.locationTimeOut = null;
				this.locationTimeOut = setTimeout(this.getLocationBandleDatas, 15000);
			},
			//获取读者借阅排行数据
			getReaderRankingDatas() {
				var param = {
					begin: '',
					end: '',
					pagesize: 10,
					index: 1,
					order: 0
				}
				HttpServer.httpPost.call(this, '/Api/Statistics/Reader/BorrowRanking', param, function(response) {}, function(response) {
					var xAxisDatas = [],
					seriesDatas = [];
					response.data.info.forEach(function(item) {
						xAxisDatas.push(item.readername);
						seriesDatas.push(item.count);
					})
					myChart = echarts.init(document.getElementById("readerRankingChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b}: {c}"
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
							data: xAxisDatas
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#FFFFFF', '#006633', '#009999', '#660033',
										'#660099', '#990033', '#999900', '#CC6633',
										'#FF9900', '#993399'
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontWeight: 'bolder',
											fontSize: 14
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					});
				})
				this.readerBorrowTimeOut = null;
				this.readerBorrowTimeOut = setTimeout(this.getReaderRankingDatas, 3600000);
			},
			formateDate(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BindTime.indexOf("T");
					array[i].BindTime = array[i].BindTime.substring(0, index1) + " " + array[i].BindTime.substring(index1 + 1, index1 + 9);
				}
			},
			//新书推荐
			getNewBookDatas() {
				HttpServer.httpGet.call(this, '/Api/Book/Info/NewBook?index=1&pageSize=20', function(response) {}, function(response) {
					this.formateDate(response.data.info);
					this.images = [];
					for(var i = 0; i < response.data.cover.length; i++) {
						if(response.data.cover[i] != '') {
							this.images.push(response.data.cover[i]);
						}
					}
				})
			},
			//获取今日流通数据
			getTodayCirculateDatas() {
				HttpServer.httpGet.call(this, '/Api/Statistics/Circulation/Today', function(response) {}, function(response) {
					myChart = echarts.init(document.getElementById("todayCirculateChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#00FFFF', '#FF0000'],
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							textStyle: {
								color: '#fff'
							},
							data: ['今日借阅', '今日还书']
						},
						series: [{
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							label: {
								normal: {
									formatter: '{c}\n({d}%)',
									textStyle: {
										// color: '#fff',
										fontWeight: 'bolder',
										fontSize: '13'
									}
								}
							},
							data: [{
								value: response.data.todayborrowcount,
								name: '今日借阅'
							},
							{
								value: response.data.todayreturncount,
								name: '今日还书'
							}
							],
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					});
					myChart1 = echarts.init(document.getElementById("bookStatusChart"));
					myChart1.setOption({
						animation: false,
						color: ['#FF0000', '#00FFFF'],
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							textStyle: {
								color: '#fff'
							},
							data: ['总外借图书', '总在库图书']
						},
						series: [{
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							label: {
								normal: {
									formatter: '{c}\n({d}%)',
									textStyle: {
										// color: '#fff',
										fontWeight: 'bolder',
										fontSize: '13'
									}
								}
							},
							data: [{
								value: response.data.allbookincount,
								name: '总在库图书'
							},
							{
								value: response.data.allbookoutcount,
								name: '总外借图书'
							}
							],
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					});
				})
				this.todayCirculateTimeOut = null;
				this.todayCirculateTimeOut = setTimeout(this.getTodayCirculateDatas, 1800000);
			}
		},
		created() {
			this.showTime();
			this.getTodayCirculateDatas();
			this.getBookTypeDatas();
			this.getMultipleInfoDatas();
			this.getLocationBandleDatas();
			this.getReaderRankingDatas();
			this.getNewBookDatas();
		},
		beforeDestroy() {
			clearTimeout(this.timer);
			clearTimeout(this.todayCirculateTimeOut);
			clearTimeout(this.locationTimeOut);
			clearTimeout(this.readerBorrowTimeOut);
			clearTimeout(this.bookBorrowTimeOut);
		},
	}
</script>
<style scoped>
	@import '../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.body {
		height: 100%;
		background: url('../../../assets/images/dataStatistic/bg.jpg') no-repeat;
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;
		.title {
			height: 6vh;
			width: 100%;
			display: flex;
			background: rgba(135, 158, 255, 0.4);
			/* 一些不支持背景渐变的浏览器 */
			background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(135, 158, 255, 0.3)), to(#090edc));
		}
		.content {
			width: 100%;
			margin: 0;
			display: flex;
			.content-title {
				width: aotu;
				height: 20px;
				color: #fff;
				font-size: 15px;
				font-weight: bold;
				margin-left: 32px;
				background-color: #090edc;
				border-radius: 2px;
				display: inline;
				font-family: "Microsoft Yahei";
			}
			.chartRegion {
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				position: relative;
				width: 100%;
				border: 0.1rem solid #879eff;
			}
			.chartRegion span:nth-child(1) {
				position: absolute;
				left: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0 0 0.3rem;
			}
			.chartRegion span:nth-child(2) {
				position: absolute;
				right: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0.3rem 0 0;
			}
			.chartRegion span:nth-child(3) {
				position: absolute;
				right: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0.3rem 0.3rem 0;
			}
			.chartRegion span:nth-child(4) {
				position: absolute;
				left: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0 0.3rem 0.3rem;
			}
		}
	}
</style>